<template>
  <div class="geshou">
    <!-- 首页歌手 -->
    <div class="tanxin geshou_tl">
      <p>入住歌手</p>
      <span>查看全部 &gt;</span>
    </div>

    <ul class="geshou_ul">
      <li class="tanxin geshou_li" v-for="(item, index) in geshou" :key="index">
        <img :src="item.img1v1Url" />
        <div>
          <span>{{ item.name }}</span>
          <p class="ellipsis">{{ item.alias[0] }}</p>
        </div>
      </li>
    </ul>
    <div class="geshou_sq">
      <p>申请成为网易音乐人</p>
    </div>
  </div>
</template>

<script>
import { GetSouApi } from "@/request/api";
export default {
  data() {
    return {
      geshou: [],
    };
  },
  created() {
    GetSouApi().then((res) => {
      if (res.data.code === 200) {
        console.log(res.data);
        this.geshou = res.data.artists;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.geshou {
  .geshou_tl {
    justify-content: space-between;
    margin: 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    p {
      font-weight: bold;
    }
    span {
      font-weight: 300;
      color: #666;
    }
  }
  .geshou_ul {
    margin: 0 20px;
    .geshou_li {
      margin-top: 20px;
      cursor: pointer;
      justify-content: flex-start;
      img {
        width: 62px;
        height: 62px;
        margin-right: 10px;
      }
      div {
        span {
          display: block;
          font-weight: bold;
          margin-top: 7px;
          margin-bottom: 10px;
        }
        p {
          width: 110px;
          font-size: 14px;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }
  .geshou_sq {
    margin: 20px;
    width: 60%;
    border: 1px solid #999;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>